<template>
  <view class="pile-list-page">
    <!-- 终端内容 -->
    <view class="main-content-container">
      <view class="type-tab">
        <u-tabs
          :list="[{ name: '直流' }, { name: '交流' }]"
          :activeStyle="{ color: 'rgba(40, 42, 49, 1)', fontWeight: 'bold' }"
          :inactiveStyle="{ color: 'rgba(126, 127, 131, 1)' }"
          lineColor="rgba(17, 143, 67, 1)"
          :current="currentType - 1"
          @change="handleTabChange"
        ></u-tabs>
      </view>
      <view
        class="scroll-item"
        v-for="pile in filteredPileList"
        :key="pile.EquipmentID"
      >
        <view class="pile-status-wrapper">
          <view
            :class="
              pile.ConnectorInfos[0].Status !== '空闲'
                ? 'pile-status--active'
                : ''
            "
            class="pile-status"
          >
            {{ pile.ConnectorInfos[0].Status === "空闲" ? "空闲" : "已插枪" }}
          </view>
          <view class="time-info" v-if="pile.status === 1">13:04插枪</view>
        </view>

        <view class="pile-rect" @click="handlePileClick(pile)">
          <view class="plie-header">
            <view class="pile-title">
              <text class="name">
                {{ pile.EquipmentName }}
              </text>
              <text class="code" v-if="false"> ({{ pile.EquipmentID }}) </text>
            </view>
            <view
              class="pile-type"
              :class="
                pile?.ConnectorInfos[0]?.ConnectorType === 3
                  ? 'pile-type-slow'
                  : ''
              "
              >{{ pile?.ConnectorInfos[0]?.ConnectorSpeed?.slice(0, 1) }}
            </view>
          </view>

          <view class="pile-car-info">
            <text class="text">终端编号 </text>
            <text class="text">{{ pile.EquipmentID }}</text>
          </view>
          <view class="pile-type-info">
            <text>
              {{ pile?.EquipmentType === 1 ? "直流快充" : "交流单相7kW" }} |
              国标2011 国标2015
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onShow, onLoad } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import { fetchPileList } from "@/utils/api/teld.js";
import usePileStore from "@/store/pile.js";
const pileStore = usePileStore();
const pileList = ref([]);
const currentType = ref(0);
const currentTab = ref("直流");
const filteredPileList = computed(() => {
  if (currentType.value === "1") {
    return pileList.value.filter((item) => {
      return item.ConnectorInfos[0]?.ConnectorType === 4;
    });
  } else if (currentType.value === "2") {
    return pileList.value.filter((item) => {
      return item.ConnectorInfos[0]?.ConnectorType === 3;
    });
  }
  return pileList.value;
});

onShow(() => {
  //获取充电站信息
  getPileList();
});

onLoad((options) => {
  console.log("pile-list-options:", options);
  if (options.type) {
    console.log("type:", options.type);
    currentType.value = options.type;
    setTimeout(() => {
      currentTab.value =
        currentType.value === "1" || currentType.value === 1 ? "直流" : "交流";
    }, 1000);
  }
});

//获取充电站数据
const getPileList = () => {
  const data = {
    StationsInfo: {
      LastQueryTime: "",
      PageNo: 1,
      PageSize: 50,
    },
    StationStatus: {
      StationIDs: ["5101161213"],
    },
  };
  fetchPileList(data).then((res) => {
    pileList.value = res;
  });
};
const handlePileClick = (pile) => {
  pileStore.updatePile(pile);
  uni.navigateTo({
    url: `/pages/pile/pile?id=${pile.EquipmentID}`,
  });
};
const handleTabChange = (tabItem) => {
  console.log("tabItem:", tabItem);

  currentTab.value = tabItem.name;

  if (tabItem.name === "交流") {
    currentType.value = "2";
  } else if (tabItem.name === "直流") {
    currentType.value = "1";
  }
};
</script>

<style scoped lang="scss">
@import "../../style/common.scss";
.main-content-container {
  // margin: 0 -16px;
  background-color: #fff;
  padding: 18px 7px;
  padding-top: 0;
  border-radius: 16px;
  .type-tab {
    display: flex;
    align-self: center;
    justify-content: center;
    position: sticky;
    top: 0;
    will-change: position;
    background-color: #fff;
    z-index: 9;
    padding-bottom: 4px;
  }
}
.pile-list-page {
  background-color: rgb(245, 246, 248);
  padding: 20px 16px;
  .content-section-card {
    background-color: #ffffff;
    padding: 16px 7px;
    border-radius: 12px 12px 12px 12px;
    -webkit-border-radius: 12px 12px 12px 12px;
    -moz-border-radius: 12px 12px 12px 12px;
    -ms-border-radius: 12px 12px 12px 12px;
    -o-border-radius: 12px 12px 12px 12px;
    width: 100%;
    box-sizing: border-box;
  }
}

// .scroll-item {
//   // background-color: #ffffff;
//   padding: 15px 0 15px 20px;
//   padding-right: 0;
//   font-size: 20rpx;
//   // margin-bottom: 20rpx;
//   // border-radius: 15rpx;
//   border-bottom: 1px solid rgba(234, 234, 234, 1);
//   display: flex;
//   align-items: center;
//   // justify-content: space-between;
//   .pile-status-wrapper {
//     // display: flex;
//     // flex-direction: column;
//     // align-items: center;
//     // justify-content: center;
//     // margin-right: 20px;
//     .pile-status {
//       width: 52px;
//       height: 52px;
//       display: flex;
//       align-items: center;
//       justify-content: center;
//       border: 4px solid #24cea6;
//       border-radius: 50%;
//       color: #24cea6;

//       &--active {
//         border-color: rgba(97, 167, 247, 1);
//         color: rgba(97, 167, 247, 1);
//       }
//     }
//     .time-info {
//       text-align: center;
//       margin-top: 8px;
//       font-size: 12px;
//       color: #b4b5b7;
//     }
//   }

//   .pile-tanan {
//     font-size: 30rpx;
//     text-align: center;
//     color: #0aa671;
//   }
//   .plie-header {
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//   }
//   .pile-rect {
//     flex: 1;
//   }
//   .pile-title {
//     font-size: 25rpx;
//     font-weight: bold;
//     .name {
//       font-size: 16px;
//     }
//     .code {
//       font-size: 12px;
//     }
//   }
//   .pile-type {
//     width: 24px;
//     height: 24px;
//     color: #ffffff;
//     font-size: 16px;
//     background: #cc2b2b;
//     border-radius: 2px 2px 2px 2px;
//     text-align: center;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//   }
//   .pile-type-slow {
//     background: #2bcc30;
//   }
//   .pile-car-info {
//     display: inline-block;
//     padding: 2px 3px;
//     margin: 6px 0;
//     background-color: rgba(240, 240, 240, 1);
//     font-size: 12px;
//     .text {
//       color: rgba(180, 181, 183, 1);
//     }
//   }
//   .pile-type-info {
//     font-size: 14px;
//     color: rgba(126, 127, 131, 1);
//   }
//   .pile-box {
//     margin: 10rpx 0;
//     display: flex;
//     justify-content: space-between;
//     .price {
//       display: flex;
//       align-items: center;
//       .pri {
//         font-size: 30rpx;
//         color: #0aa671;
//         margin: 0 10rpx;
//       }
//       .limit {
//         color: #adadb3;
//         font-size: 20rpx;
//       }
//     }
//     .resi {
//       display: flex;
//       font-size: 25rpx;
//       .fast {
//         width: 30rpx;
//         height: 30rpx;
//       }
//       .free {
//         font-weight: bold;
//         margin: 0 10rpx;
//       }
//     }
//   }
//   .pile-distance {
//     display: flex;
//     align-items: center;
//     .distance {
//       font-size: 25rpx;
//     }
//     .navi {
//       margin-left: 20rpx;

//       .location {
//         width: 40rpx;
//         height: 40rpx;
//       }
//     }
//   }
// }
</style>
